<template>
	<uv-cell-group class="fill-width-height flex-unset overflow-auto" ref="scrollContainer" @scroll="handleScroll" v-if="downRecordList.length > 0">
		<view v-if="isSelect" class="flex-row justify-center align-center" style="gap: 12px;padding: 12px;">
			<uv-button text="全选" type="warning" @click="allSelect"></uv-button>
			<uv-button text="删除" type="error" @click="deleteItems"></uv-button>
			<uv-button text="取消" @click="cancel"></uv-button>
		</view>
		<uv-grid :col="4" class="fill-width" >
			<uv-checkbox-group v-model="checkboxValue">
				<uv-grid-item 
					v-for="(item,index) in downRecordList" 
					:key="index"
					:customStyle="{ padding: '6px' }"
				 >
					<uv-checkbox 
						v-if="isSelect"
						:customStyle="{marginBottom: '8px'}" 
						:key="index"
						:checked="false"
						:name="item.id"
						:value="item.selected"
					></uv-checkbox>
					<uv-image 
						mode="widthFix" 
						radius="10" 
						width="100%" 
						:lazy-load="true"
						:fade="true"
						:duration="450"
						:showMenuByLongpress="false"
						:src="viewImages(item)"
						@click="viewsDetails(item)"
						@longtap="longtap(item)"
					>
						<template v-slot:loading>
							<uv-loading-icon color="red"></uv-loading-icon>
						</template>
					</uv-image>
				</uv-grid-item>
			</uv-checkbox-group>
		</uv-grid>
		<uv-load-more 
			:status="status" 
			:loading-text="'努力加载中'"
			:loadmore-text="'轻轻上拉'"
			:nomore-text="'实在没有了'"
		/>
	</uv-cell-group>
</template>

<script>
	import { getPage, deleteByIds } from '@/api/imgRecord'
	import checkLogin from '@/framework/mixins/checkLogin'
	export default {
		mixins: [checkLogin],
		props:{
			busintype: {
				type: String,
				require: true,
				default: () => null
			}
		},
		data() {
			return {
				status: 'loadmore',
				downRecordList: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30
				},
				isSelect: false,
				checkboxValue: []
			}
		},
		computed: {
			totalPages(){
				return Math.ceil(this.total / (this.queryParams.pageSize || 10)); 
			}
		},
		methods: {
			longtap(item,event){
				item.selected = true
				this.isSelect = true
			},
			allSelect(){
				this.checkboxValue = this.downRecordList.map(item => item.id)
			},
			cancel(){
				this.isSelect = false
				this.checkboxValue = []
			},
			deleteItems(){
				if(this.checkboxValue?.length <= 0){
					return uni.showToast({
						title: '请选择数据！',
						mask: true,
						icon: 'none'
					})
				}
				const ids = this.checkboxValue.join(",")
				const that = this
				uni.showModal({
				    title: '提示',
				    content: '确认删除吗？',
				    success: function (res) {
				        if (res.confirm) {
				            deleteByIds({ids: ids}).then(res2 => {
							   let title = ""
							   if(res2.code == 200){
								   that.initPage()
								   title = "删除成功！"
							   } else {
								   title = "删除失败！"
							   }
							   uni.showToast({
							   	title: title,
							   	mask: true,
							   	icon: 'none'
							   })
						    })
				        } 
				    }
				});
			},
			viewImages(item){
				if(item.businid.startsWith('http')){
					return item.businid
				}
				this.$getPreviewPath(item.businid)
			},
			goToPage(url){
				uni.navigateTo({
				  url: url 
				});
			},
			viewsDetails(item) {
				if(this.isSelect){
					return
				}
				this.goToPage('/pages/viewdetail/index?fileId=' + item.businid)
			},
			handleScroll(event) {
				const scrollContainer = this.$refs.scrollContainer;
				if (!scrollContainer) {
				  return
				}
				const { scrollTop, scrollHeight, clientHeight } = scrollContainer?.$el;
				// 当滚动到底部时触发查询
				const isBottom = scrollTop + clientHeight >= scrollHeight - 5
				const isFlag = this.status !== 'nomore' && this.queryParams.pageNum <= this.totalPages
				if (isBottom && isFlag) {
					this.queryParams.pageNum++;
					this.getTablePage();
				}
			},
			initPage(){
				this.downRecordList = []
				this.queryParams.pageNum = 1
				this.getPage()
			},
			async getPage(){
				if(!this.busintype){
					return console.error('busintype 业务类型为空！')
				}
				const queryParams = Object.assign({ busintype: this.busintype}, this.queryParams)
				const res = await getPage(queryParams)
				this.downRecordList?.push(...res?.rows || [])
				this.total = res.total
				this.status = 'loading'
				if(this.queryParams.pageNum <= this.totalPages){
					this.status = 'loadmore'
				} else {
					this.status = 'nomore'
				}
			}
		},
		mounted(){
			this.initPage()
		}
	}
</script>

<style>

</style>
